<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.calendar{
			width: 300px;
			height: auto;
			overflow: hidden;
			background: #999;
			margin:50px auto;
		}
		ul{
			list-style: none;
			padding: 0;
			margin: 0;
			width: 100%;
		}
		li{
			width:70px;
			height: 70px;
			float: left;
			margin:10px;
			text-align: center;
			background: #ddd;
			color: #999;
			font-weight: bold;
			border: 5px solid #666;
			cursor: pointer;
		}
		li h4,li p{
			padding: 0;
			margin: 0;
		}
		li h4{
			margin-top: 13px;
		}
		li p{
			margin-top: 5px;
		}
		li.active{
			background:#222;
			color:#fff
		}
		.show{
			height: 100px;
			width: 100%;
			clear: both;
			background: #ddd;
		}
		.show h2{
			font-size: 16px;
			font-family: "微软雅黑";
			padding:0px 5px;
			margin: 0;
			line-height:45px;
		}

		.show p{
			font-size: 13px;
			margin: 0;
			font-family: "微软雅黑";
			padding:0 5px;
		}
	</style>
     
     <script type="text/javascript">
     	 window.onload=function(){
     	 	 var arrText=[
                 '不忘初心 牢记使命 永远奋斗',
                 '李克强会见俄罗斯总理张德江主持人大常委会议',
                 '全国政协常委会举行全体会议 俞正声出席',
                 '张高丽、汪洋、刘延东接受俄罗斯“友谊”勋章',
                 '学习贯彻十九大  汪洋会见斯里兰卡外长',
                 '肖捷任国务院副秘书长 陈晓东任外交部部长助理',
                 '四名中央书记处书记先后以新职务亮相',
                 '当前最重要的政治任务，王沪宁提了7个讲清楚',
                 '程坚接替方向出任火箭军政治工作部主任',
                 '《榜样·党员》之《用爱延续生命》',
                 '老外看中国 | 澳韩学者：新理念将推动中国继续前行',
                 '油价迎年内第7次上调！明起，每升油涨7分！'
     	 	 ];
             var tab=document.getElementById('tab');
             var lis=tab.getElementsByTagName('li');
             var show=tab.getElementsByTagName('div')[0];
            
             //alert(show);
             for (var i = 0; i<lis.length; i++) {
             	 lis[i].index=i; // 自定一个标签
             	 lis[i].onmouseover=function(){
             	 	for (var j=0; j<lis.length;j++) {
             	 		lis[j].className='';
             	 	}
             	   this.className='active';
             	   show.innerHTML='<h2>'+(this.index+1)+'月新闻学习</h2><p>'+arrText[this.index]+'</p>';
             	   //console.log(this.index+1);
             	 }
             	 
             }
               
     	 }
     </script>

</head>
<body>
	<div id="tab" class="calendar">
		<ul>
			<li class="active"><h4>1</h4><p>月</p></li>
			<li><h4>2</h4><p>月</p></li>
			<li><h4>3</h4><p>月</p></li>
			<li><h4>4</h4><p>月</p></li>
			<li><h4>5</h4><p>月</p></li>
			<li><h4>6</h4><p>月</p></li>
			<li><h4>7</h4><p>月</p></li>
			<li><h4>8</h4><p>月</p></li>
			<li><h4>9</h4><p>月</p></li>
			<li><h4>10</h4><p>月</p></li>
			<li><h4>11</h4><p>月</p></li>
			<li><h4>12</h4><p>月</p></li>
		</ul>
		<div class="show">
			<h2>1月新闻学习</h2><p>不忘初心 牢记使命 永远奋斗</p>
		</div>
	</div>
</body>
</html>